<template>
  <div>
    <div class="head">
      <div class="input">
        <span>组织架构名称：</span>
        <el-input v-model="queryData.department_name" clearable placeholder="请输入组织架构名称" />
      </div>
      <div class="input">
        <span>状态：</span>
        <el-select v-model="queryData.status" clearable placeholder="请选择">
          <el-option label="正常" :value="1">正常</el-option>
          <el-option label="禁用" :value="2">禁用</el-option>
        </el-select>
      </div>
      <el-button type="primary" class="btn" @click="search">查询</el-button>
      <el-button type="primary" class="btn" @click="reset">重置</el-button>
      <el-button type="primary" class="btn" @click="add">新增</el-button>
    </div>
    <div class="box">
      <el-table
        :data="tableData"
        border
        row-key="id"
        ref="tableData"
        v-loading="isTableLoading"
        empty-text="暂无数据"
        no-filtered-userFrom-text="暂无筛选结果"
        style="width: 100%"
        :max-height="tableHeight"
      >
        <el-table-column fixed prop="department_name" align="left" label="组织架构名称" min-width="200" />
        <el-table-column prop="sort" align="center" label="排序" width="100" />
        <el-table-column prop="status" align="center" label="状态" width="120">
          <template #default="scope">
            <!-- <span class="status">
              {{ scope.row.status == 1 ? '正常' : '禁用' }}
            </span> -->
            <el-tag v-if="scope.row.status == 1" size="small" type="primary">正常</el-tag>
            <el-tag v-else size="small" type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" align="center" prop="action" label="操作" width="160">
          <template #default="scope">
            <div class="action">
              <span @click="edit(scope.row)">修改</span>
              <span @click="delOk(scope.row)">删除</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!-- <el-pagination
        style="margin-top: 5px"
        @size-change="search"
        @current-change="search"
        :current-page.sync="queryData.page"
        :page-size.sync="queryData.size"
        layout="total, prev, pager, next,sizes,jumper"
        :total="total"
      >
      </el-pagination> -->
    </div>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :close-on-click-modal="false">
      <span>确定删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="(dialogVisible = false), (item = null)">取 消</el-button>
        <el-button type="primary" @click="delOk">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加组织架构" :visible.sync="isShowAdd" width="800px" :close-on-click-modal="false">
      <el-form
        :model="ruleForm"
        style="width: 100%"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        label-width="100px"
        inline
      >
        <el-form-item label="上级组织架构" prop="pids">
          <el-cascader
            v-model="ruleForm.pids"
            placeholder="请选择"
            :options="selectList"
            :props="{ checkStrictly: true, value: 'id', label: 'department_name' }"
            clearable
            style="width: 590px"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="组织架构名称" prop="department_name">
          <el-input style="width: 240px" v-model="ruleForm.department_name" placeholder="请输入组织架构名称"></el-input>
        </el-form-item>
        <el-form-item label="显示排序" prop="sort">
          <el-input-number
            :controls="false"
            :min="0"
            style="width: 240px"
            v-model="ruleForm.sort"
            label="请输入显示排序"
          ></el-input-number>
        </el-form-item>
        <br />
        <el-form-item label="负责人" prop="link_username">
          <el-input style="width: 240px" v-model="ruleForm.link_username" placeholder="请输入负责人"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="link_mobile">
          <el-input
            style="width: 240px"
            maxlength="11"
            v-model="ruleForm.link_mobile"
            placeholder="请输入联系电话"
          ></el-input>
        </el-form-item>
        <br />
        <el-form-item label="邮箱" prop="email">
          <el-input style="width: 240px" v-model="ruleForm.email" placeholder="请输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="组织架构状态" prop="status">
          <el-radio v-model="ruleForm.status" :label="1">正常</el-radio>
          <el-radio v-model="ruleForm.status" :label="2">禁用</el-radio>
        </el-form-item>

        <el-form-item label="结业证培训单位" prop="email">
          <el-input style="width: 240px" v-model="ruleForm.cert_name" placeholder="请输入结业证培训单位"></el-input>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeAdd('ruleForm')">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
import { DepartmentList, DepartmentSave, DepartmentDelete } from '../../api/manage';
export default {
  name: 'cultivate',
  data() {
    // 自定义手机号校验规则
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback();
      } else {
        // 简单的中国大陆手机号正则表达式
        const reg = /^1[3456789]\d{9}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error('请输入正确的手机号'));
        }
      }
    };
    return {
      tableHeight: 500,
      queryData: {
        department_name: '',
        status: '',
        page: 1,
        size: 10,
      },
      total: 0,
      isTableLoading: false,
      tableData: [],
      dialogVisible: false,
      isShowAdd: false,
      ruleForm: {
        pids: null,
        pid: '',
        department_name: '',
        sort: 1,
        link_username: '',
        link_mobile: '',
        email: '',
        status: 1,
      },
      rules: {
        department_name: [{ required: true, message: '请输入组织架构名称', trigger: 'blur' }],
        link_mobile: [{ validator: validatePhone, trigger: 'blur' }],
        email: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
        pids: [{ required: true, message: '请选择上级组织架构', trigger: 'change' }],
      },
      selectList: [],
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.tableHeight = window.innerHeight - 260;
    });
    this.getList();
    this.getSelectList();
  },
  methods: {
    search() {
      this.queryData.page = 1;
      this.getList();
    },
    reset() {
      this.queryData.department_name = '';
      this.queryData.status = '';
      this.search();
    },
    add() {
      this.ruleForm = {
        pids: null,
        pid: '',
        department_name: '',
        sort: 1,
        link_username: '',
        link_mobile: '',
        email: '',
        status: 1,
      };
      this.isShowAdd = true;
    },

    edit(item) {
      this.ruleForm = JSON.parse(JSON.stringify(item));
      this.ruleForm.pids = this.ruleForm.pid;
      // this.ruleForm.pids = this.ruleForm.pidsstr.split(',').map(Number);
      this.isShowAdd = true;
    },
    del(item) {
      this.dialogVisible = true;
      this.item = item;
    },
    delOk(item) {
      this.$confirm('确定删除该组织架构?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        DepartmentDelete({ id: item.id }).then((res) => {
          this.dialogVisible = false;
          this.$message.success('删除成功');
          this.item = null;
          this.getList();
          this.getSelectList();
        });
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.pid = this.ruleForm.pids[this.ruleForm.pids.length - 1];
          this.ruleForm.pidsstr = this.ruleForm.pids.toString();
          DepartmentSave(this.ruleForm).then((res) => {
            this.isShowAdd = false;
            this.$message.success(this.ruleForm.id ? '修改成功' : '添加成功');
            this.$refs[formName].resetFields();
            this.getList();
            this.getSelectList();
          });
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    closeAdd(formName) {
      this.isShowAdd = false;
      this.$refs[formName].resetFields();
    },
    getList() {
      this.isTableLoading = true;
      DepartmentList(this.queryData).then((res) => {
        this.tableData = res.data.list;
        this.isTableLoading = false;
      });

    },
    getSelectList() {
      DepartmentList().then((res) => {
        // this.selectList = [{ id: 0, department_name: '顶级组织架构', children: res.data.list }];
        this.selectList = res.data.list;
      });
    },
  },
};
</script>

<style scoped>
.head {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  padding-bottom: 0px;
}
.input {
  display: flex;
  align-items: center;
  margin-right: 15px;
  margin-bottom: 20px;
}
.input > span {
  font-size: 12px;
  flex-shrink: 0;
}
.btn {
  margin-bottom: 20px;
}
.box {
  width: 100%;
  background: #ffffff;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
}
.action {
  display: flex;
  align-items: center;
  justify-content: center;
}
.action span {
  color: #0256ff;
  font-size: 12px;
  cursor: pointer;
  margin: 0 8px;
}
.flex {
  width: 100%;
  display: flex;
  align-items: center;
}
.status {
  padding: 4px 8px;
  background: #e8f4ff;
  line-height: 14px;
  color: #0256ff;
  border: 1px solid #84adff;
  border-radius: 4px;
}
</style>
